import React, { Component } from 'react';
import { Form, Icon, Input, Button, message } from 'antd';
import './login.less';
import {saveToken,saveValue,saveRefreshToken} from '../../util/StorageUtil';
import qs from 'qs';
import axios from 'axios';
import {auth_password, auth_username, action_login_success} from '../../util/Constant';
import connect from "react-redux/es/connect/connect";

const FormItem = Form.Item;

class Login extends Component {

    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <div id='login-root'>
                <Form className="login-form" onSubmit={this.props.handleSubmit.bind(this)}>
                    <FormItem>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名!' }],
                        })(
                            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                    </FormItem>
                </Form>
            </div>
        )
    }

}

const mapStateToProps = (state) => {
    return {
        isLogin:state.isLogin
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        handleSubmit(e) {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    values.grant_type='password';
                    values.redirect_uri='https://www.baidu.com';
                    values.client_id=auth_username;
                    values.scope='all';
                    axios.post('/oauth/token',qs.stringify(values),{
                        auth: {
                            username: auth_username,
                            password: auth_password
                        }
                    })
                        .then((response)=>{
                            saveToken(response.data.access_token);
                            saveRefreshToken(response.data.refresh_token);

                            saveValue("username",values.username);
                            let action = {
                                type: action_login_success,
                                isLogin: true,
                                username:values.username
                            };
                            dispatch(action);
                        })
                        .catch((error)=>{
                            message.error("登陆失败!");
                        });
                }
            });
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(Login));